<template>
    <!-- 自提点 -->
    <view class="address">
        <!-- here: 需要考虑一下没有授权地址权限的问题 -->
        <view v-if="addressInfo.selfLiftName" class="address_text" @click="jumpMap">
            <view class="address_text_area flex">
                <view>
                    <text class="space">
                        {{ addressInfo.selfLiftName }}
                    </text>
                    <image v-if="canChange" class="icon_img" :src="getImgOssUrl('/ui-prod-2.0.0/icon_img05.png')" />
                </view>
                <!-- here: 需要加逻辑计算 -->
                <view class="address_tip" v-if="showDistance && isNumber(addressInfo.distance)">
                    <text v-if="addressInfo.distance > 1000">
                        距您{{ floatDivide(addressInfo.distance, 1000).toFixed(1) }}km
                    </text>
                    <text v-else>距您{{ addressInfo.distance }}m</text>
                </view>
            </view>
            <view class="address_text_address flex">
                <view class="address_detail">
                    {{ addressInfo.provinceName === addressInfo.cityName ? '' : addressInfo.provinceName }}
                    {{ addressInfo.cityName }}
                    {{ addressInfo.areaName }}
                    {{ addressInfo.townName }}
                    {{ addressInfo.streetName }}
                </view>
                <view class="address_icon_img relative">
                    <image src="/static/marker/dingwei.png"></image>
                    <view class="address_call_block" @click.stop="openMap"></view>
                </view>
            </view>
            <view class="address_business_hours flex">
                <view class="address_business_hours_content">
                    营业时间： {{ getSiteInfo(addressInfo.businessTime) }}
                </view>
                <view class="address_icon_img relative">
                    <image src="/static/marker/dianhua.png"></image>
                    <view class="address_call_block" @click.stop="copyPhone"></view>
                </view>
            </view>
        </view>
        <view v-else @click="jumpMap" class="address_text">
            <view class="flex">
                <view class="">请选择自提点</view>
                <image class="icon_img" :src="getImgOssUrl('/ui-prod-2.0.0/icon_img05.png')" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { getImgOssUrl, floatDivide, isNumber } from '@/commons/utils.js';
import router from '@/router';

const props = defineProps({
    addressInfo: {
        type: Object,
        default: () => {
            return {};
        }
    },
    // 是否能拨打联系电话
    canCall: {
        type: Boolean,
        default: true
    },
    // 是否能切换自提点
    canChange: {
        type: Boolean,
        default: false
    },
    // 右上角展示距离
    showDistance: {
        type: Boolean,
        default: false
    }
});

// 选择自提点
const jumpMap = () => {
    if (props.canChange) {
        router.push({
            path: '/pages-home/site/index',
            query: {
                siteId: props.addressInfo?.siteId
            }
        });
    }
};

// 跳转地图
const openMap = () => {
    uni.openLocation({
        latitude: Number(props.addressInfo.lat) || 0,
        longitude: Number(props.addressInfo.lng) || 0,
        scale: 18,
        name: props.addressInfo.selfLiftName,
        address: `${
            props.addressInfo.provinceName === props.addressInfo.cityName ? '' : props.addressInfo.provinceName
        }${props.addressInfo?.cityName || ''}${props.addressInfo?.areaName || ''}${props.addressInfo?.townName || ''}${
            props.addressInfo?.streetName || ''
        }`
    });
};

/* 拨打电话 */
const copyPhone = () => {
    if (props.canCall) {
        let phoneNumber = props.addressInfo.contactMobile;
        uni.makePhoneCall({ phoneNumber, complete: () => {} });
    }
};

/* 营业时间 */
const getSiteInfo = arr => {
    const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    let activityText = '';
    const hasWeek = arr?.map(item => weeks[item.weekTime - 1]);
    activityText = weeks
        .reduce(
            (prev, curr, currentIndex) => {
                if (currentIndex == prev.total && hasWeek.find(item => item == curr)) {
                    prev.weeks[prev.arrI] = prev.weeks[prev.arrI] || [];
                    prev.weeks[prev.arrI].push(curr);
                } else {
                    prev.arrI = prev.weeks.length;
                }
                prev.total = prev.total + 1;
                return prev;
            },
            {
                total: 0,
                arrI: 0,
                weeks: []
            }
        )
        ?.weeks?.map(item => {
            if (item.length > 2) {
                return `${item[0]}至${item[item.length - 1]}`;
            }
            return item.join('、');
        })
        ?.join('、');
    activityText += ` ${arr[0].timeSegmentStart}~${arr[0].timeSegmentEnd}`;
    return activityText;
};
</script>

<style lang="scss" scoped>
.address {
    align-items: center;
    justify-content: space-between;
    margin: 18rpx 0;
    padding: 29rpx 27rpx 29rpx 31rpx;
    color: #333333;
    background: #ffffff;

    .flex {
        display: flex;
        justify-content: space-between;
    }
    .space {
        margin-right: 22rpx;
    }
    .icon_img {
        width: 14rpx;
        height: 25rpx;
    }
    .address_text {
        width: 100%;
        .address_tip {
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
            white-space: nowrap;
        }
        .address_text_area {
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .address_text_address {
            margin: 29rpx 0;
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            align-items: center;
            color: #333333;
            .address_detail {
                max-width: 650rpx;
            }
        }
        .address_business_hours {
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            .address_business_hours_content {
                max-width: 650rpx;
            }
        }
    }

    .relative {
        position: relative;
        .address_call_block {
            width: 65rpx;
            height: 65rpx;
            position: absolute;
            top: -20rpx;
            left: -20rpx;
        }
    }

    .address_icon_img {
        width: 25rpx;
        height: 25rpx;
        line-height: 25rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
